<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <!-- 表格内搜索表单 -->
      <common-form
        :form-infos="searchForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onSearchSubmit"
      />
    </common-table>
  </div>
</template>

<script>
import { defineComponent, shallowReactive } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '退款维权',
      attrs: {
        data: [
          //表格需要的数据
          {
            shop_message: "唯红",
            ship_state: "已发货",
            pay_money: "200",
            real_money: "50",
            pay_refund: "0",
            ask_time: "暂无",
          },
          {
            shop_message: "唯红",
            ship_state: "已发货",
            pay_money: "200",
            real_money: "50",
            pay_refund: "0",
            ask_time: "暂无",
          },
          {
            shop_message: "唯红",
            ship_state: "已发货",
            pay_money: "200",
            real_money: "50",
            pay_refund: "0",
            ask_time: "暂无",
          },
          {
            shop_message: "唯红",
            ship_state: "已发货",
            pay_money: "200",
            real_money: "50",
            pay_refund: "0",
            ask_time: "暂无",
          },
        ],
        ref: "multipleTable",
        style: "100%",
        border: true,
      },
      // Table-column Attributes
      column: [
        {
          type: "selection", //多选框Attribute
        },
        {
          prop: "shop_message",
          label: "商品信息",
        },
        {
          prop: "ship_state",
          label: "发货状态",
        },
        {
          prop: "pay_money",
          label: "订单金额",
        },
        {
          prop: "pay_refund",
          label: "退款金额",
        },
        {
          prop: "ask_time",
          label: "申请时间",
        },
      ],
      // 操作按钮
      controller: ["查看详情"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      // 商品名称
      {
        id: 1,
        name: "CommonInput",
        prop: "r1",
        value: "",
        formItemAttrs: {
          label: "商品名称 :",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },

      // 订单编号
      {
        id: 2,
        name: "CommonInput",
        prop: "r2",
        value: "",
        formItemAttrs: {
          label: "订单编号 :",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },

      // 退款编号
      {
        id: 3,
        name: "CommonInput",
        prop: "r3",
        value: "",
        formItemAttrs: {
          label: "退款编号 :",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },

      // 退款状态
      {
        id: 4,
        name: "CommonSelect",
        prop: "r4",
        value: "",
        options: {
          1: "全部",
          2: "待转账",
          3: "买家待退货",
          4: "卖家待收货",
          5: "卖家已收货",
          6: "卖家拒绝",
        },
        formItemAttrs: {
          label: "退款状态 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },

      // 退款方式
      {
        id: 5,
        name: "CommonSelect",
        prop: "r5",
        value: "",
        options: {
          1: "全部",
          2: "仅退款",
          3: "退货退款",
        },
        formItemAttrs: {
          label: "退款方式 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },

      // 发货状态
      {
        id: 6,
        name: "CommonSelect",
        prop: "r6",
        value: "",
        options: {
          1: "全部",
          2: "待发货",
          3: "已发货",
        },
        formItemAttrs: {
          label: "发货状态 :",
        },
        inputAttrs: {
          placeholder: "请选择",
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
